<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>Smooth Scroll</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<!-- stylesheets -->
		<style type="text/css">
			body {
				font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
				font-size: 112.5%;
				margin-left: auto;
				margin-right: auto;
				max-width: 40em;
				width: 88%;
			}
		</style>
	</head>

	<body>

		<main id="top">

			<nav>
				<h1>Smooth Scroll</h1>
				<p><a href="https://github.com/cferdinandi/smooth-scroll">GitHub</a></p>
				<hr>
			</nav>

			<section>
				<p>
				    <strong>Linear</strong><br>
				    <a data-easing="linear" href="#bazinga">Linear (no other options)</a><br>
				</p>

				<p>
				    <strong>Ease-In</strong><br>
				    <a data-easing="easeInQuad" href="#bazinga">Quad</a><br>
				    <a data-easing="easeInCubic" href="#bazinga">Cubic</a><br>
				    <a data-easing="easeInQuart" href="#bazinga">Quart</a><br>
				    <a data-easing="easeInQuint" href="#bazinga">Quint</a>
				</p>

				<p>
				    <strong>Ease-In-Out</strong><br>
				    <a data-easing="easeInOutQuad" href="#bazinga">Quad</a><br>
				    <a data-easing="easeInOutCubic" href="#bazinga">Cubic</a><br>
				    <a data-easing="easeInOutQuart" href="#bazinga">Quart</a><br>
				    <a data-easing="easeInOutQuint" href="#bazinga">Quint</a>
				</p>

				<p>
				    <strong>Ease-Out</strong><br>
				    <a data-easing="easeOutQuad" href="#bazinga">Quad</a><br>
				    <a data-easing="easeOutCubic" href="#bazinga">Cubic</a><br>
				    <a data-easing="easeOutQuart" href="#bazinga">Quart</a><br>
				    <a data-easing="easeOutQuint" href="#bazinga">Quint</a>
				</p>

				<p>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
				</p>

				<p>
				    <strong>Non-ASCII Characters</strong><br>
				    <a href="#中文">中文</a>
				</p>

				<p>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
				</p>

				<p id="中文">
					<strong>中文</strong>
					<a href="#myymälä">More Special Characters</a>
				</p>

				<p>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
				</p>

				<p id="myymälä">myymälä</p>

				<p>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
				</p>

				<p id="bazinga"><a href="#1@#%^-bottom">Bazinga!</a></p>

				<p>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>
				    .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.
				</p>

				<p id="1@#%^-bottom"><a href="#top">Back to the top</a></p>
			</section>
		</main>

		<!-- Javascript -->
		<script src="dist/smooth-scroll.polyfills.js"></script>
		<script>

			// Instantiate Scrolls
			var scroll = new SmoothScroll('a[href*="#"]:not([data-easing])');

			if (document.querySelector('[data-easing]')) {
				var linear = new SmoothScroll('[data-easing="linear"]', {easing: 'linear'});

				var easeInQuad = new SmoothScroll('[data-easing="easeInQuad"]', {easing: 'easeInQuad'});
				var easeInCubic = new SmoothScroll('[data-easing="easeInCubic"]', {easing: 'easeInCubic'});
				var easeInQuart = new SmoothScroll('[data-easing="easeInQuart"]', {easing: 'easeInQuart'});
				var easeInQuint = new SmoothScroll('[data-easing="easeInQuint"]', {easing: 'easeInQuint'});

				var easeInOutQuad = new SmoothScroll('[data-easing="easeInOutQuad"]', {easing: 'easeInOutQuad'});
				var easeInOutCubic = new SmoothScroll('[data-easing="easeInOutCubic"]', {easing: 'easeInOutCubic'});
				var easeInOutQuart = new SmoothScroll('[data-easing="easeInOutQuart"]', {easing: 'easeInOutQuart'});
				var easeInOutQuint = new SmoothScroll('[data-easing="easeInOutQuint"]', {easing: 'easeInOutQuint'});

				var easeOutQuad = new SmoothScroll('[data-easing="easeOutQuad"]', {easing: 'easeOutQuad'});
				var easeOutCubic = new SmoothScroll('[data-easing="easeOutCubic"]', {easing: 'easeOutCubic'});
				var easeOutQuart = new SmoothScroll('[data-easing="easeOutQuart"]', {easing: 'easeOutQuart'});
				var easeOutQuint = new SmoothScroll('[data-easing="easeOutQuint"]', {easing: 'easeOutQuint'});
			}

			// // Log scroll events
			// var logScrollEvent = function (event) {
			// 	console.log('type:', event.type);
			// 	console.log('anchor:', event.detail.anchor);
			// 	console.log('toggle:', event.detail.toggle);
			// };
			// document.addEventListener('scrollStart', logScrollEvent, false);
			// document.addEventListener('scrollStop', logScrollEvent, false);
			// document.addEventListener('scrollCancel', logScrollEvent, false);
		</script>


	</body>
</html>